<!-- 参政议政 -->
<template>
  <Pannel @load="handleLoadData" @refresh="handleRefresh">
    <view class="pannel-inner-box">
      <NavBar></NavBar>
      <image class="bg-image" :src="bg" mode="widthFix" />
      <view class="user-msg">
        <view class="user-image" v-if="userInfo.tx">
          <image class="image" :src="joinUrl(userInfo.tx)" mode="scaleToFill" />
        </view>
        <view class="user-name">{{ data.xm || "" }}</view>
      </view>

      <view class="content-box">
        <view class="content-title"
          >{{ detail }}这一年里先进的你超努力！完成了：</view
        >
        <view class="content-list" v-if="data.maps && data.maps.length > 0">
          <view class="item" v-for="(item, index) of data.maps" :key="index">
            <view class="name">{{ item.key }}</view>
            <view class="msg">
              <view class="num">{{ item.value.amount || 0 }}</view>
              <view class="text">{{ item.value.unit || "" }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Pannel>
</template>

<script lang="ts" setup>
import bg from "./static/base64/bg";
import { joinUrl } from "@/utils/tools";
import { requestPost } from "@/hooks/api";
import { useUserInfo } from "@/store/index";
import useDetail from "@/store/detail";

const [detail] = useDetail();

const onJump = (data: any) => {
  uni.navigateTo(data);
};

// 履职情况
const [data, fetchData] = requestPost("/ascreen/home/lzDetailApp/ajax");
const [userInfo] = useUserInfo();

//  下拉刷新
const handleRefresh = (callback: any) => {
  callback(fetchDatas);
};

const handleLoadData = (callback: any) => {
  callback(fetchDatas);
};

async function fetchDatas() {
  await fetchData({ year: detail.value });
}
</script>

<style lang="scss" scoped>
.pannel-inner-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  .bg-image {
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .user-msg {
    position: absolute;
    top: 188rpx;
    left: 494rpx;
    display: flex;
    align-items: center;

    .user-image {
      width: 50rpx;
      height: 50rpx;
      border: 2rpx solid #ffffff;
      border-radius: 50%;
      box-sizing: border-box;
      overflow: hidden;

      .image {
        width: 100%;
        height: 100%;
      }
    }

    .user-name {
      margin-left: 8rpx;
      font-size: 28rpx;
    }
  }

  .content-box {
    position: absolute;
    top: 354rpx;
    left: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    .content-title {
      font-size: 28rpx;
      font-weight: bold;
    }

    .content-list {
      margin-top: 30rpx;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 546rpx;
        height: 68rpx;
        padding: 0 28rpx;
        border-bottom: 1rpx solid #edbe9f;
        box-sizing: border-box;
        font-size: 32rpx;

        .msg {
          display: flex;
          align-items: center;

          .num {
            font-size: 40rpx;
            color: #b75b19;
          }

          .text {
            margin-left: 20rpx;
          }
        }
      }
    }
  }
}
</style>
